<template>
	<view class="container">
		<u-navbar :border-bottom='false' background='unset'>
			<view class="slot-wrap"></view>
		</u-navbar>

		<view class="top">
			<u-avatar :size="200" :src="info.info.avatar" mode="square"></u-avatar>
			<view class="info">
				<text class="name">{{info.info.nickname||info.info.username}}</text>
				<view class="online">
					<view class="icn"></view>
					<!-- status 状态:0=离线,1=在线,2=忙碌,3=隐身 -->
					<u-tag size='mini' v-if="info.info.status==0" text="离线" type="info" />
					<u-tag size='mini' v-if="info.info.status==1" text="在线" type="success" />
					<u-tag size='mini' v-if="info.info.status==2" text="忙碌" type="error" />
					<u-tag size='mini' v-if="info.info.status==3" text="隐身" type="warning" />
				</view>
				<!-- <span v-if="user.job==2 ">{{info.info.mobile||''}}</span> -->
				<span v-if="user.job==2 ">{{info.info.email||''}}</span>
			</view>
		</view>

		<view class="card">
			<view class="c-a">
				性别
				<span>{{info.info.gender=='0'?'-':info.info.gender=='1'?'男':'女'}}</span>
			</view>
			<view class="c-a">
				职业/专业
				<span>{{info.info.speciality||'-'}}</span>
			</view>
			<view class="c-a" v-if="!info.info.is_friend">
				备注
				<view class="bio">
					<u-input :border-bottom='false' v-model="new_contact_remark" input-align="right" />
				</view>
			</view>
			<view class="c-a" v-if="!info.info.is_friend">
				验证消息
				<view class="bio">
					<u-input :border-bottom='false' v-model="new_contact_note" input-align="right" />
				</view>
			</view>

		</view>

		<view class="card">
			<view class="c-a">
				市、县
				<span>{{info.info.area||'-'}}</span>
			</view>
			<view class="c-a">
				个人简介
				<span>{{info.info.bio||'-'}}</span>
			</view>
		</view>
		<view class="card">
			<navigator :url="'/sub/center/mine/preview?id='+info.info.id" class="c-a" v-if="info.info.job==2">
				专业资料<u-icon name="arrow-right" color="#c5c5c5" size="20" />
			</navigator>
			<navigator :url="'/sub/center/uploadInfoImg?id='+info.info.id" class="c-a">
				个人图片<u-icon name="arrow-right" color="#c5c5c5" size="20" />
			</navigator>
		</view>

		<view class="card" v-if="info.info.is_relation==1 && info.info.job==1 && user.job==2 ">
			<navigator class="c-a" :url="'/sub/center/mine/zixun?id='+info.info.id">
				<span>历史咨询问卷</span>
				<u-icon :label='info.advice_count||0' label-pos='left' name="arrow-right" color="#888888"
					size="26"></u-icon>
			</navigator>
			<navigator class="c-a" :url="'/sub/center/mine/huifang?id='+info.info.id">
				<span>历史回访问卷</span>
				<u-icon :label='info.follow_count||0' label-pos='left' name="arrow-right" color="#888888"
					size="26"></u-icon>
			</navigator>
		</view>

		<view class="btu" v-if="info.info.is_friend==1">
			<!-- <u-button v-if="info.info.is_relation==0" @click="showModal" type="error">删除好友</u-button> -->
			<u-button :custom-style="{'background-color':'#6EC9E1',color:'#FFF'}" @click="tochat(info.info.user_id)"
				type="primary">发消息</u-button>
		</view>

		<view v-if="info.info.is_friend!=1 && info.info.is_friend!=-1 && info.info.job==1 && user.job==1" class="btn"
			@click="add">加好友
		</view>

		<p v-show="info.info.job==2 && info.info.is_friend!=1"
			style="text-align: center;margin-top: 20px;opacity: 0.6;font-size: 12px;">
			赶紧去和对方见面并保持联系吧。</p>

		<u-modal v-model="show" @confirm="delFriend()" :show-cancel-button='true' :mask-close-able="true"
			content="确定删除好友？"></u-modal>
	</view>
</template>

<script>
	import {
		userInfo,
		chat
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {
					info: {
						is_friend: -1
					}
				},
				user: '',
				other: true,
				show: false,
				new_contact_note: '',
				new_contact_remark: ''
			}
		},
		onLoad(e) {
			this.user = this.ws.getUserInfo()
			if (e.id) {
				if (e.id == this.user.id) {
					this.other = false
				}
				this.init(e.id)
			}

		},
		methods: {
			init(id) {
				let that = this
				userInfo({
					user_id: id
				}).then(res => {
					if (res.code == 1) {
						that.info = res.data
						if (!that.info.info.is_friend) {
							that.info.info.is_friend = 0
						}
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			showModal() {
				this.show = true
			},
			add() {
				let that = this
				let form = {
					action: "apply",
					id: this.info.info.id,
					method: "post",
					new_contact_note: this.new_contact_note,
					new_contact_remark: this.new_contact_remark,
					type: "friends"
				}
				that.ws.pageFun(function() {
					var message = {
						c: 'User',
						a: 'createNewContact',
						data: form
					}
					that.ws.send(message);
					that.ws.showMsgCallback = function() {
						that.submitButtonStatus = false
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				}, that)
			},
			tochat(id) {
				let that = this
				chat({
					'user_id': id
				}).then(res => {
					if (res.code == 1) {
						that.ws.tochat(res.data.session_id)
					}
				})
			},
			delFriend() {
				var that = this
				that.ws.pageFun(function() {
					let message = {
						c: 'User',
						a: 'delContact',
						data: {
							'id': that.info.info.id,
							'type': 'user'
						}
					}
					that.ws.send(message);
					that.ws.showMsgCallback = function() {
						that.ws.pageRefresh.message = true
						that.ws.pageRefresh.addressList = true
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/message/message'
							})
						}, 2000)
					}
				}, that)
			}

		}
	}
</script>

<style lang="less" scoped>
	.btu {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20px;

		u-button {
			min-width: 40%;
		}
	}

	.container {
		height: 100vh;
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			align-items: center;

			.info {
				display: flex;
				flex-flow: column;
				margin-left: 16rpx;
				justify-content: space-evenly;

				span {
					font-size: 13px;
					color: #666666;
				}

				span,
				.name,
				.online {
					margin: 5rpx 0;
				}

				.name {
					font-size: 20px;
					font-weight: bold;
				}

				.remake {
					font-size: 14px;
					opacity: 0.5;
					margin-top: 20rpx;
				}
			}
		}

		.card {
			background-color: #FFF;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}

		.c-a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.bio {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.online {
			display: flex;
			align-items: center;

			.icn {
				padding: 4rpx;
				border-radius: 50%;
				background-color: #6EC9E1;
				margin-right: 20rpx;
			}

		}

	}
</style>